import React, { useEffect, useRef, useState } from 'react'
import { Popover, NavBar, SwipeCell, Cell, Button, Image, Badge } from 'react-vant';
// axios请求
import request from "../../../utils/request"
import './index.less'
import { connect } from "react-redux"
import action from "../../../store/action"
import moment from 'moment'
const actions = [
    { text: '发起群聊', icon: 'chat' },
    { text: '添加朋友', icon: 'friends' },
    { text: '扫一扫', icon: 'scan' },
    { text: '收付款', icon: 'balance-pay' },
];

function WeChat(props) {
    // PopoverRef
    const popover = React.useRef()
    const [list, setList] = useState([]);
    const [isRead, setIsRead] = useState([])
    //获取localstorage的登录信息
    let fromId = JSON.parse(localStorage.getItem('token'))
    //获取朋友信息列表
    const getFirends = async () => {
        const firendsData = await request.post('/JFChatMsg/getmessage', { id: fromId.info_id });
        const { newData, result } = firendsData.data
        //已读未读消息
        let notRead = result.filter((item) => {
            return item.fromId === fromId.info_id
        })
        setIsRead(notRead)
        //筛选出朋友mysqlstate状态为0的
        const firendsDataList = newData.filter((item) => {
            return item.state == 0
        })
        //筛选出朋友列表中是自己登录的那个
        const friends = firendsDataList.filter((item) => {
            return item.fromId === fromId.info_id || item.toId === fromId.info_id
        })
        //筛选出朋友列表中不是自己的
        let firendsList = friends.filter((item) => {
            return item.toId !== fromId.info_id
        })
        console.log(firendsList);
        //最后赋值
        setList(firendsList)
    }
    //获取未读信息
    useEffect(() => {
        getFirends()
    }, [])
    //跳转到聊天页面
    function jumpMessage(item) {
        console.log(item);
        props.history.push({
            pathname: '/main/chatPage',
            state: item
        })
    }

    // 发送群聊事件
    const sendGroupChat = () => {
        console.log('发送群聊');
        props.history.push('initiate')
        popover.current.hide();//关闭popover
    }
    // 添加朋友事件
    const addFriend = () => {
        setTimeout(() => {
            props.history.push({
                pathname: "/main/addFriend",
                state: { path: props.location.pathname }
            })
        })
        popover.current.hide();//关闭popover
    }
    // 扫一扫
    const scan = () => {
        console.log('扫一扫');

        popover.current.hide();//关闭popover
    }
    //标记为未读
    const isNotRead = async (item) => {
        await request.post('/JFChatMsg/changeIsRead', { id: item.toId })
    }

    //删除聊天记录
    const delMessage = async (item) => {
        console.log(item);
        let obj = {
            fromId: item.fromId,
            toId: item.toId
        }
        await request.post('/JFChatMsg/delMessage', obj)
    }

    return (
        <div className="weChatBox">
            {/* 顶部微信导航栏 */}
            <NavBar
                title="微信"
                rightText={<Popover
                    ref={popover}
                    theme="dark"
                    placement='bottom-end'
                    offset={[5, 8]}
                    style={{ width: '100px' }}
                    reference={<span>
                        <svg className='icon' aria-hidden='true' style={{
                            fontSize: "15px", border: '1px solid #000',
                            borderRadius: '50%'
                        }}>
                            <use xlinkHref="#icon-jia"></use>
                        </svg>
                    </span>}
                >
                    <ul>
                        <li onClick={sendGroupChat}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-xiaoxi2"></use>
                            </svg>
                            <p>发起群聊</p>
                        </li>
                        <li onClick={addFriend}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-tianjiapengyou"></use>
                            </svg>
                            <p>添加朋友</p>
                        </li>
                        <li onClick={scan}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-saoyisao"></use>
                            </svg>
                            <p>扫一扫</p>
                        </li>
                        <li>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-icon-test1"></use>
                            </svg>
                            <p>收付款</p>
                        </li>
                        <li>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-xiaoxi_xuanzhong"></use>
                            </svg>
                            <p>帮助与反馈</p>
                        </li>
                    </ul>
                </Popover>}
            />
            <div className="list">
                {/* 首页搜索框 */}
                <div className="searchOne">
                    <div onClick={() => {
                        props.history.push('/main/search')
                    }} className="search">
                        <span>
                            <svg className='icon' style={{ fontSize: "18px" }} aria-hidden='true'>
                                <use xlinkHref="#icon-sousuo"></use>
                            </svg>
                        </span>
                        <span>搜索</span>
                    </div>
                </div>
                {/* 消息列表 */}
                {
                    list.length > 0 ? list.map((item, index) => {
                        return <div className="listMessage" onClick={() => {
                            jumpMessage(item)
                        }} key={index}>
                            <SwipeCell
                                rightAction={
                                    <>
                                        <Button onClick={() => {
                                            isNotRead(item)
                                        }} square color="rgb(0 0 0 / 63%)">
                                            标记未读
                                    </Button>
                                        <Button onClick={() => {
                                            delMessage(item)
                                        }} square type="danger">
                                            删除
                                    </Button>
                                    </>
                                }
                            >
                                <Cell.Group>
                                    <Badge style={{ marginLeft: "10px" }} content={isRead.length > 0 ? isRead.length : ''}>
                                        <Image radius="5" style={{ width: "40px", height: "40px", }} src="https://pic3.zhimg.com/80/v2-437f4dc41f0f972f31921a228641cf9e_720w.jpg?source=1940ef5c" alt="" />
                                    </Badge>
                                    <Cell title={item.remark} value={moment(Number(item.time)).format(' HH:mm:ss')} label={item.msg} />
                                </Cell.Group>
                            </SwipeCell>
                        </div>
                    }) : null
                }
            </div>
        </div>
    )
}
export default connect(state => state, action.ymz)(WeChat)
